<template>

<div class="demo-step-container">
    <div id="title">
        <h1>#Start</h1>
        <h2>Only Three Steps,Start your QA.Spider</h2>
    </div>
    <div id="content">
    <mu-stepper :activeStep="activeStep" orientation="vertical">
        <mu-step>
            <mu-step-label>
                下载|Download
            </mu-step-label>
            <mu-step-content>
                <p>
                    Github fork & clone
                </p>
                <mu-raised-button label="NEXT" class="demo-step-button" @click="handleNext" primary/>
            </mu-step-content>
        </mu-step>
        <mu-step>
            <mu-step-label>
                安装依赖项|Install Dependences
            </mu-step-label>
            <mu-step-content>
                <p>
                    npm install & python -m pip install
                </p>
                <mu-raised-button label="NEXT" class="demo-step-button" @click="handleNext" primary/>
                <mu-flat-button label="BACK" class="demo-step-button" @click="handlePrev" />
            </mu-step-content>
        </mu-step>
        <mu-step>
            <mu-step-label>
                启动爬虫和可视化网站|Start Journey
            </mu-step-label>
            <mu-step-content>
                <p>
                    npm run dev & scrapy crawl xxx
                </p>
                <mu-raised-button label="Finish" class="demo-step-button" @click="handleNext" primary/>
                <mu-flat-button label="BACK" class="demo-step-button" @click="handlePrev" />
            </mu-step-content>
        </mu-step>
    </mu-stepper>
    <p v-if="finished">
        都完成啦!<a href="javascript:;" @click="reset">点这里</a>访问教程
    </p>
    </div>
</div>
</template>

<script>
export default {
  name:'process',
  data () {
    return {
      activeStep: 0
    }
  },
  computed: {
    content () {
      let message = ''
      switch (this.activeStep) {
        case 0:
          message = 'SETTING Environment git clone https://github.com/yutiansut/QUANTAXIS_SPIDER'
          break
        case 1:
          message = 'powershell>install.ps1'
          break
        case 2:
          message = 'powershell>start'
          break
        default:
          message = 'fuck! 又 TM 出错了！！！'
          break
      }
      return message
    },
    finished () {
      return this.activeStep > 2
    }
  },
  methods: {
    handleNext () {
      this.activeStep++
    },
    handlePrev () {
      this.activeStep--
    },
    reset () {
      this.activeStep = 0
    }
  }
}
</script>

<style>
.demo-step-container {
    position:relative;
    width: 100%;
    height: 100%;
    display: block;
}
#title{
    position:relative;
    width:60%;
    height:100%;
    float: left;
    display: inline-block;
    margin: 10% 0%;
}

#content{
    width:30%;
    height:100%;
    position:relative;
    display: inline-block;
    margin: 16% 0%;
}

#title h1{
    color: darkgrey;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 85px;
}

#title h2{
    color: darkgrey;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;

}
#content.demo-step-content {
  margin: 0  16px;
}

#content.demo-step-button {
  margin-top: 12px;
  margin-right: 12px;
}
</style>